<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咕咕牛 - 资源同步失败</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Orbitron:wght@400;500;700&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
    <style>
		:root {
			--bg-color: #f8f9fa;
			--container-bg: #ffffff;
			--card-base-bg: #ffffff;
			--header-bg: linear-gradient(135deg, #e74c3c, #c0392b);
			--text-primary: #212529;
			--text-secondary: #6c757d;
			--text-highlight: #dc3545;
			--border-color-subtle: #e9ecef;
			--shadow-subtle: rgba(0, 0, 0, 0.04);
			--ai-bg-color: #f8f9fa;
			--ai-header-bg: #2c3e50;
			--ai-text-color: #34495e;
			--code-bg: #f0f0f0;
			--inline-code-color: #c82333;
			--error-summary-bg: #fff6f6;
			--error-summary-border: #f5c6cb;
            --file-list-section-bg: #fff3cd;
            --file-list-section-border: #ffeeba;
            --file-list-bg: #fff9e6;
            --file-list-border: #ffeeba;
            --file-list-text: #856404;
		}
		* { box-sizing: border-box; margin: 0; padding: 0; }
		body { font-family: 'Noto Sans SC', sans-serif; background-color: var(--bg-color); color: var(--text-primary); padding: 25px; max-width: 850px; margin: 25px auto; font-size: 16px; line-height: 1.7; }
		.container { background-color: var(--container-bg); border: 2px solid var(--text-highlight); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 20px 3px rgba(220, 53, 69, 0.2); border-radius: 12px; overflow: hidden; }
		.header { background: var(--header-bg); padding: 30px 35px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
		.header h1 { font-family: 'Orbitron', sans-serif; font-size: 28px; margin-bottom: 8px; }
		.main-content { padding: 25px; display: flex; flex-direction: column; gap: 20px; }
		.section { background: var(--card-base-bg); border: 1px solid var(--border-color-subtle); border-radius: 8px; padding: 20px 25px; box-shadow: 0 2px 8px var(--shadow-subtle); position: relative; overflow: hidden; }
		.section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--text-highlight) 0%, rgba(255, 107, 107, 0) 100%); opacity: 0.7; }
		.section h2 { font-size: 20px; color: var(--text-primary); margin-bottom: 15px; padding-bottom: 8px; position: relative; }
		.section h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 2px; background: var(--text-highlight); border-radius: 1px; opacity: 0.8; }
		.section.error-summary { background-color: var(--error-summary-bg); border-color: var(--error-summary-border); }
        .section.file-list-section { background-color: var(--file-list-section-bg); border-color: var(--file-list-section-border); }
        .file-list { list-style-type: none; padding-left: 0; font-family: 'SF Mono', 'Consolas', monospace; font-size: 14px; max-height: 220px; overflow-y: auto; background: var(--file-list-bg); padding: 15px; border-radius: 6px; border: 1px solid var(--file-list-border); }
        .file-list li { padding: 5px 0; border-bottom: 1px dashed rgba(133, 100, 4, 0.2); color: var(--file-list-text); }
        .file-list li:last-child { border-bottom: none; }
		.error-message-content { overflow-wrap: break-word; }
		.error-message-content .code { font-family: monospace; background-color: #f1f1f1; padding: 3px 8px; border-radius: 4px; color: var(--inline-code-color); font-size: 0.9em; }
		.suggestions-list { list-style-type: disc; padding-left: 20px; color: var(--text-secondary); line-height: 1.8; }
		.suggestions-list li { margin-bottom: 8px; }
        .suggestions-list .code { font-family: monospace; background-color: #e2e3e5; padding: 2px 6px; border-radius: 4px; color: #343a40; font-size: 0.9em; }
		footer { text-align: center; padding: 0px 0px 20px 0px; font-size: 14px; color: var(--text-secondary); font-family: 'Orbitron', monospace; }
	</style>
</head>
<body style="{{scaleStyleValue}}">
	<div class="container">
		<header class="header">
			<h1>资源同步失败</h1>
			<p>插件在部署核心资源时，发现仓库文件不完整。</p>
		</header>
		<main class="main-content">
			<div class="section error-summary">
				<h2>错误摘要</h2>
				<div class="error-message-content">
					{{ errorMessage }} <span class="code">({{ errorCode }})</span>
				</div>
			</div>

            {{ if syncError && syncError.files && syncError.files.length > 0 }}
			<div class="section file-list-section">
				<h2>检测到 {{ syncError.count }} 个文件或目录缺失</h2>
				<ul class="file-list">
					{{ each syncError.files fileItem }}
					<li>{{ fileItem }}</li>
					{{ /each }}
					{{ if syncError.count > syncError.files.length }}
					<li>... 等共 {{ syncError.count }} 项</li>
					{{ /if }}
				</ul>
			</div>
            {{ /if }}

			<div class="section">
				<h2>解决方案</h2>
				<ul class="suggestions-list">
                    <li>这通常意味着你下载的核心仓库不完整或已损坏。</li>
					<li>请先执行 <span class="code">#重置咕咕牛</span> 来彻底清理本地的残留文件。</li>
					<li>然后再次执行 <span class="code">#下载咕咕牛</span> 进行一次全新的、完整的下载。</li>
					<li>如果问题仍然存在，请联系插件作者并提供此截图。</li>
				</ul>
			</div>
		</main>
		<footer class="footer">Miao-Plugin-MBT v{{ pluginVersion }} - Sync Error Report</footer>
	</div>
</body>
</html>